<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书查询</title>
  <script src="../../js/vue.min.js"></script>
  <script src="../../js/axios.min.js"></script>
</head>
<style>
  td{
    text-align: center;
    border: 1px solid;
  }
</style>
<body>

<div id="app">
  <label>书名：</label><input v-model="name">
  <label>出版社：</label><input v-model="press">
  <label>日期：</label><input v-model="date"><button @click="query">查询</button>
  <table style="width: 100%;">
    <tr>
      <th>id</th>
      <th>书名</th>
      <th>出版社</th>
      <th>出版时间</th>
      <th>作者</th>
      <th>数量</th>
      <th>图片</th>
    </tr>
    <tr  v-for="book in books">
      <td>{{book.id}}</td>
      <td>{{book.bookname}}</td>
      <td>{{book.bookpress}}</td>
      <td>{{book.pressdate}}</td>
      <td>{{book.bookauthor}}</td>
      <td>{{book.bookcount}}</td>
      <td><img :src="book.bookimage" style="height: 100px"></td>
      <td><a :href="'modify.html#'+book.id">修改</a></td>
    </tr>
  </table>


</div>
<script>


  var vue = new Vue({
    el : "#app",
      data:{
          books:[],
          name:"",
          press:"",
          date:""
      },
    created(){
      this.query();
    },
    methods:{
      query(){
        axios.get(`../../QueryBookServlet.s`,{
          params: {
            name:this.name,
            press:this.press,
            date: this.date,
          }
        }).then(res=>{
          this.books = res.data;
        });
      }
    }
  });
</script>

</body>
</html>